<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="使用CSS3新特性在，配合html5及简易js实现的各种漂亮的动态效果" />
  <meta name="keyword" content="html、CSS3、特效" />
  <title>CSS特效网</title>
  <link rel="stylesheet" href="./css/common.css">
  <!-- 响应式 -->
  <link rel="stylesheet" href="./css/big.css" media="(min-width:600px)">
  <link rel="stylesheet" href="./css/small.css" media="(min-width:451px) and (max-width:599px)">
  <link rel="stylesheet" href="./css/device.css" media="(max-width:450px)">
  <!-- 轮播图 -->
  <link rel="stylesheet" href="./css/viewpager.css">
  <!-- 鼠标悬浮显示文本 -->
  <link rel="stylesheet" href="./css/show.css">
  <!-- 不缓存 -->
  <meta http-equiv="pragma" content="no-cache">
  <meta http-equiv="cache-control" content="no-cache">
  <meta http-equiv="expires" content="0">
</head>

<body>
  <div class="canvas"></div>
  </div>
  <div class="app">
    <!-- 1 header -->
    <header>
      <!-- 1.1 导航条 -->
      <nav>
        <p>Special Effects Website</p>
        <section class="other">
          <a>Portfolio Inspiratio</a>
          <a>Subscribe</a>
          <a>About</a>
        </section>
      </nav>
      <!-- 1.2 轮播图 -->
      <div class="imgbox">
        <div class="viewpager">
          <a href="/src/e/"><img src="./src/e.png" alt="图片获取失败"></a>
          <a href="/src/g/"><img src="./src/g.png" alt="图片获取失败"></a>
          <a href="/src/b/"><img src="./src/b.png" alt="图片获取失败"></a>
        </div>
        <ul class="radiuBox">
          <li class="active"></li>
          <li></li>
          <li></li>
        </ul>
      </div>
      <!-- 1.3 广告 -->
      <div class="advertisement">
        <a href="">
          Goods
        </a>
      </div>
    </header>
    <!-- 2 content -->
    <main>
      <div class="goods">
        <a class="box" href="/src/a/">
          <div class="imgbox">
            <img src="./src/a.png" alt="图片获取失败">
          </div>
          <div class="content">
            <h4>图片3D分层悬浮</h4>
            <p>鼠标悬浮在图片上会弹起叠加</p>
          </div>
        </a>
        <a class="box" href="/src/b/">
          <div class="imgbox">
            <img src="./src/b.png" alt="图片获取失败">
          </div>
          <div class="content">
            <h4>漂亮的动态搜索框</h4>
            <p>鼠标悬浮搜索框显现</p>
          </div>
        </a>
        <a class="box" href="/src/c/">
          <div class="imgbox">
            <img src="./src/c.png" alt="图片获取失败">
          </div>
          <div class="content">
            <h4>动态滑动登录框</h4>
            <p>点击之后会滑动到登录页面</p>
          </div>
        </a>
        <a class="box" href="/src/d/">
          <div class="imgbox">
            <img src="./src/d.png" alt="图片获取失败">
          </div>
          <div class="content">
            <h4>停留图片展示文章</h4>
            <p>鼠标悬浮展示文章，正如这个一样</p>
          </div>
        </a>
        <a class="box" href="/src/e/">
          <div class="imgbox">
            <img src="./src/e.png" alt="图片获取失败">
          </div>
          <div class="content">
            <h4>实现炫酷加载效果</h4>
            <p>可以显现类似加载的效果，像跳动的音符一样</p>
          </div>
        </a>
        <a class="box" href="/src/f/">
          <div class="imgbox">
            <img src="./src/f.png" alt="图片获取失败">
          </div>
          <div class="content">
            <h4>表单案例</h4>
            <p>鼠标划过会改变背景色</p>
          </div>
        </a>
        <a class="box" href="/src/g/">
          <div class="imgbox">
            <img src="./src/g.png" alt="图片获取失败">
          </div>
          <div class="content">
            <h4>登陆注册页面</h4>
            <p>超级好看，值得学习</p>
          </div>
        </a>
      </div>
    </main>
  </div>
  <!-- 3 footer -->
  <footer>
    <div class="introduce">
      <section class="share">
        <a href="">Share</a>
        <a href="">Send via e-mailShare</a>
        <a href="">Share on TwitterShare</a>
        <a href="">Share on FacebookShare</a>
        <a href="">Share on Google Plus</a>
        <a href="">Share on LinkedIn</a>
      </section>
      <!-- <section class="more">
        <a href="">More</a>
      </section> -->
      <section class="about">
        <p>About</p>
        <p>Made on March 8, 2021</p>
        <p>Author:&emsp;Grim Reaper</p>
      </section>
    </div>
  </footer>
  <!-- inject script -->
  <script src="./js/index.js"></script>
</body>

</html>
<!-- 

 -->